<template>
    <div class="user">
        <div class="side">
            <div class="header">
                <div class="user_avatars">
                    <el-upload class="avatar-uploader"
                        :show-file-list="false"
                         :before-upload="beforeAvatarUpload">
                        <img v-if="userInfo.avatar_url" :src="userInfo.avatar_url" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </div>
                <p class="username">{{userInfo.name}}</p>
            </div>
            <div class="menu">
                <ul>
                    <li @click="gotoSonRoute(item.route_name)" v-for="item,index in nav" :key="index" :style="{'color':$route.name == item.route_name ? '#1abc9c':''}">{{item.title}}</li>
                </ul>
            </div>
        </div>

        <div class="router">

            <router-view>
            </router-view>
        </div>
    </div>
</template>

<script lang='ts' setup>
import { onMounted, reactive, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { userInfoApi,uploadUserAvatarApi } from '@/api/front'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
const $router = useRouter()
const $route= useRoute()
let userId: string | null = localStorage.getItem('userId') || null
let userInfo: any = ref({})
const nav = [
    {
        title:"我的信息",
        route_name:"info"
    },
    {
        title:"我的书架",
        route_name:"bookshelf"
    },    
    {
        title:"修改密码",
        route_name:"updatepwd"
    },
]
let gotoSonRoute = (route_name: string) => {
    $router.push({
        name: route_name
    })
}
let getUserInfo = (userId: string | null) => {
    if (typeof userId == null) return
    userInfoApi(Number(userId)).then((res: any) => {
        if (res.code === 200) {
            userInfo.value = res.data
        }
    })
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png'){
        ElMessage.error('只能上传图片')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('头像大小不得超过2MB!')
        return false
    }
    let formData = new FormData()

    formData.append('id',userId||'0')
    formData.append('file',rawFile)
    uploadUserAvatarApi(formData).then((res:any)=>{
        userInfo.value.avatar_url = res.data.user_avatar_url
    },err=>{
        console.log(err)
        ElMessage.error('上传失败!')
    })
    return false
}
onMounted(() => {
    
    getUserInfo(userId)
})
</script>

<style lang='scss' scoped>
.user {
    height: 830px;
    margin-top: 24px;
    display: flex;

    .side {
        width: 280px;
        margin-right: 20px;
        height: 830px;
        background-color: #fff;

        .user_avatars {
            position: relative;

            .avatar-uploader .el-upload {
                border: 1px dashed var(--el-border-color);
                border-radius: 6px;
                cursor: pointer;
                position: relative;
                overflow: hidden;
                transition: var(--el-transition-duration-fast);
            }

            .avatar-uploader .el-upload:hover {
                border-color: var(--el-color-primary);
            }

            .el-icon.avatar-uploader-icon {
                font-size: 28px;
                color: #8c939d;
                width: 178px;
                height: 178px;
                text-align: center;
            }

            img {
                width: 80px;
                height: 80px;
                border-radius: 40px;
                border:1px solid #c3c3c3
            }
            p{
                text-align:center
            }
        }

        .header {
            height: 200px;
            box-sizing: border-box;
            padding: 50px 0;
            background: #1abc9c;
            color: #fff;
            text-align: center;
        }

        .menu {
            ul {
                padding: 20px 40px;

                li {
                    height: 50px;
                    line-height: 50px;

                }

                li:hover {
                    cursor: pointer;
                    color: #1abc9c;
                }
            }
        }
    }

    .router {
        background-color: #fff;
        width: 900px;
        height: 100%;
    }

}
</style>